<template>
    <div v-if="status === 0 && false" style="background-position: center;background-size: cover;width: 100%;height:100%"
        :style="{
            backgroundImage: `url(${bing.data})`
        }">
        <div @click="() => {

        }"
            style="width: 100%;height: 60px;display: flex;justify-content: center;align-items: flex-end;font-size: 16px;color: white;padding-bottom: 12px;backdrop-filter: blur(20px);background-color: rgba(255,255,255,0.6);">

        </div>
        <div style="width: 100%;height: calc(100% - 60px);overflow-y: auto;background-color: #fff;">
            <div style="width: 100%;background-color: rgb(242,242,242);padding: 16px;margin-top: 8px;">
                <input v-model="login.form.username" placeholder="账号" type="text"
                    style="border: 0;border-bottom: 1px solid gray;background-color: transparent;height: 32px;font-size: 16px;width: 100%;">
            </div>
            <div style="width: 100%;background-color: rgb(242,242,242);padding: 16px;margin-top: 8px;">
                <input v-model="login.form.password" placeholder="密码" type="password"
                    style="border: 0;border-bottom: 1px solid gray;background-color: transparent;height: 32px;font-size: 16px;width: 100%;">
            </div>
            <div style="width: 100%;padding: 16px;">
                <cButton_old @click="login.handle()" style="width: 100%;height: 48px;">登录</cButton_old>
            </div>
        </div>
    </div>
    <div v-if="status === 1 && false" style="background-position: center;background-size: cover;width: 100%;height:100%"
        :style="{
            backgroundImage: `url(${bing.data})`
        }">
        <FlexBox style="width: 100%;height: 100%;position: fixed;left: 0;top: 0;">

            <FlexBox flex-direction="column" gap="16px"
                style="width: 400px;height: auto;box-shadow: 0 4px 10px rgba(0,0,0,0.2);border-radius: px;position: relative;overflow: hidden;padding: 16px;"
                justify-content="flex-start">
                <span style="font-size: 22px;font-weight: bold;text-align: left;width: 100%;">欢迎使用</span>
                <input @keypress="(e) => {
                    if (e.code == 'Enter') {
                        tool.focusElementById('login_password')
                    }
                }" id="login_account" v-model="login.form.username" placeholder="账号" type="text">
                <input @keypress="(e) => {
                    if (e.code == 'Enter') {
                        login.handle()
                    }
                }" id="login_password" v-model="login.form.password" placeholder="密码" type="password">
                <div style="width: 100%;text-align: right;">
                    <cButton_old style="width: 80px;height: 32px;">登录</cButton_old>
                </div>
            </FlexBox>

        </FlexBox>
    </div>
    <div style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;" :style="{
        backgroundColor: tool.getThemeColor('box.bg')
    }">
        <div style="width: 100%;height: 100%;display: inline-block;padding: 16px;overflow-y: auto;" :style="{
            border: ism() ? 'none' : `1px solid ${tool.getThemeColor('box.border')}`,
            borderRadius: ism() ? '0' : '16px',
            boxShadow: ism() ? 'none' : '0 10px 20px rgba(0,0,0,0.3)',
            color: tool.getThemeColor('page.text'),
            maxWidth: ism() ? '100%' : '300px',
            maxHeight: ism() ? '100%' : '360px',
        }">
            <div
                style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;">
                <div v-if="page.current === 0"
                    style="width: 100%;height: calc(100% - 21px);display: flex;align-items: center;justify-content: flex-start;gap: 8px;flex-direction: column;">
                    <CCenterText>登录</CCenterText>
                    <cInput v-model="login.form.username" label="用户名"></cInput>
                    <cInput v-model="login.form.password" type="password" label="密码"></cInput>
                    <div
                        style="width: 100%;display: flex;align-items: center;justify-content: center;gap: 8px;margin-top: 8px;">
                        <cButton2 @click="page.setPage(2)">注册</cButton2>
                        <cButton2 @click="page.setPage(1)">手机号登录</cButton2>
                        <cButton2 @click="login.handle()">登录</cButton2>
                    </div>
                </div>
                <div v-if="page.current === 1"
                    style="width: 100%;height: calc(100% - 21px);display: flex;align-items: center;justify-content: flex-start;gap: 8px;flex-direction: column;">
                    <CCenterText>手机号登录</CCenterText>
                    <cInput label="手机号"></cInput>
                    <div style="width: 100%;display: flex;align-items: center;justify-content: center;gap: 4px;">
                        <cInput label="验证码"></cInput>
                        <cButton
                            style="word-break: keep-all;min-width: 100px;margin-top: 39px;text-align: center;border-radius: 8px;">
                            <span style="line-height: 24px;">获取验证码</span>
                        </cButton>
                    </div>
                    <div
                        style="width: 100%;display: flex;align-items: center;justify-content: center;gap: 8px;margin-top: 8px;">
                        <cButton2 @click="page.setPage(2)">注册</cButton2>
                        <cButton2 @click="page.setPage(0)">用户名登录</cButton2>
                        <cButton2>登录</cButton2>
                    </div>

                </div>
                <div v-if="page.current === 2"
                    style="width: 100%;height: calc(100% - 21px);display: flex;flex-direction: column;">
                    <CCenterText>注册</CCenterText>
                    <div style="width: 100%;height: calc(100% - 18px);overflow-y: auto;">
                        <div
                            style="width: 100%;display: flex;align-items: center;justify-content: flex-start;gap: 8px;flex-direction: column;">
                            <cInput label="手机号"></cInput>
                            <div
                                style="width: 100%;display: flex;align-items: center;justify-content: center;gap: 4px;">
                                <cInput label="验证码"></cInput>
                                <cButton
                                    style="word-break: keep-all;min-width: 100px;margin-top: 39px;text-align: center;border-radius: 8px;">
                                    <span style="line-height: 24px;">获取验证码</span>
                                </cButton>
                            </div>
                            <cInput type="password" label="密码"></cInput>
                            <cInput type="password" label="重复密码"></cInput>
                            <div
                                style="width: 100%;display: flex;align-items: center;justify-content: center;gap: 8px;margin-top: 8px;">
                                <cButton2 @click="page.setPage(0)">返回登录</cButton2>
                                <cButton2>注册</cButton2>
                            </div>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;text-align: center;font-size: 14px;" :style="{
                    color: tool.getThemeColor('page.text'),
                }">
                    <span style="padding: 4px;border-radius: 100px;">折桂教育</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed, watch, onMounted, onBeforeUnmount } from 'vue'
import tool from '../tool'
import controls from '../controls/controls'
import cButton_old from '../components/button.vue'
import FlexBox from '../components/flexBox.vue'
import axios from 'axios'
import cButton from '../components/cButton.vue'
import cButton2 from '../components/cButton2.vue'
import cInput from '../components/cInput.vue'
import CCenterText from '../components/cCenterText.vue'

const status = ref(0)

const ism = tool.getIsMobileFunction()

const page = reactive({
    current: 0,
    setPage(to) {
        this.current = to
    }
})

const login = reactive({
    form: {
        username: '',
        password: ''
    },
    async handleAutoLogin() {
        let userLoginData = tool.localStorage.getItem('userLoginData')
        if (userLoginData !== null) {
            await tool.flow(async () => {
                let re = await tool.requestData('/user/autoLogin', {
                    token: userLoginData
                })
                if (re.status) {
                    tool.store.setItem('userData', re.data)
                    tool.store.setItem('userData_token', re.data.token)
                    tool.localStorage.setItem('userLoginData', re.data.token)
                    tool.router.push('/')
                } else {
                    throw re.content
                }
            }, err => {
                tool.localStorage.removeItem('userLoginData')
                tool.controls.toast.show({
                    content: `${err}`,
                    icon: 'error'
                })
            })
        }
    },
    async handle(isAuto = false) {
        if (!this.form.username) {
            controls.toast.show({
                content: '输入账号',
                icon: 'error'
            })
            return
        }
        if (!this.form.password) {
            controls.toast.show({
                content: '输入密码',
                icon: 'error'
            })
            return
        }
        let re = await tool.requestData('/user/login', tool.Object.assign(this.form, {
            password: this.form.password
        }))
        if (re.status) {
            if (!isAuto) {
                controls.toast.show({
                    content: '登录成功',
                    icon: 'success',
                    mask: true
                })
                await tool.wait(0.5)
                tool.store.setItem('userData', re.data)
                tool.store.setItem('userData_token', re.data.token)
                tool.router.push('/')
                if (tool.localStorage.getItem('userLoginData') === null) {
                    let modal_savePassword = controls.modal({
                        title: '提示',
                        content: '是否保存登录信息，下次打开网站时自动登录？',
                        showCancel: true,
                        okCallBack: () => {
                            tool.localStorage.setItem('userLoginData', re.data.token)
                            modal_savePassword.close()
                        }
                    })
                }
            } else {
                tool.store.setItem('userData', re.data)
                tool.router.push('/')
            }
        } else {
            tool.localStorage.removeItem('userLoginData')
            controls.toast.show({
                content: re.content,
                icon: 'error'
            })
        }
    }
})

const bing = reactive({
    async get() {
        try {
            const response = await axios.get('https://dailybing.com/api/v1/today/ja-jp/FHD', { responseType: 'arraybuffer' })
            const base64Image = btoa(
                new Uint8Array(response.data)
                    .reduce((data, byte) => data + String.fromCharCode(byte), '')
            )
            this.data = `data:image/jpeg;base64,${base64Image}`
        } catch (error) {
            console.error('Error fetching image:', error)
            this.data = ''
        }
    },
    data: ''
})

onMounted(async () => {
    tool.store.onChangeAndNotify('windowStatus', (e) => {
        status.value = e
    })
    login.handleAutoLogin()
    setTimeout(() => {
        tool.focusElementById('login_account')
    }, 100);
})

</script>

<style scoped></style>